<template>
    <div class="header">
        <div class="caidanzhedie" @click="toggleCollapse">
            <i class="iconfont"
                :class="{ 'icon-a-cebianlanfenleizhedie': !isCollapse, 'icon-a-fenleizhediecebianlan': isCollapse }"></i>
        </div>
        <div class="tagView">
            <div class="tagViewItem" v-for="(item, index) in tagViewPathData" :class="{ 'active': item.isTrue }"
                @click="clickTag(item)">
                <span>{{ item.authName }}</span>
                <i class="el-icon-close" @click.stop="deleteTag(item)"></i>
            </div>

        </div>
        <div @click="loginOut" class="caidanzhedie">
            <i class="iconfont icon-tuichu"></i>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'

export default {
    name: "Header",
    data() {
        return {
            isCollapse: false
        }
    },
    methods: {
        ...mapMutations('tagViewPath', ['initTagViewPath', 'delTagViewPath', 'updateTagViewPath']),
        //顶部标签点击事件
        clickTag(item) {
            this.$router.push(item.path)
            this.updateTagViewPath(item)
        },
        //关闭顶部标签点击事件
        deleteTag(item) {
            this.delTagViewPath(item)
        },
        //退出
        loginOut() {

            this.$confirm('确认执行此操作吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                removeToken()
                this.$router.push('/login')
            }).catch(() => {

            })
        },
        //折叠方法
        toggleCollapse() {
            this.isCollapse = !this.isCollapse
            this.$emit('toggleCollapse');
        }
    },
    created() {
        //获取本地存储的历史记录标签页
        this.initTagViewPath()
    },
    computed: {
        ...mapState('tagViewPath', ['tagViewPathData']),
    }
}
</script>
<style scoped lang="less">
.header {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 20px;

    .caidanzhedie {
        padding: 10px;
        border-radius: 10px;
        background-color: #fff;
        color: #666;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .tagView {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        overflow: hidden;
        font-size: 14px;
        color: #606266;
        margin: 0 20px;

        .active {
            color: #1890FF;
        }

        .tagViewItem {
            padding: 10px;
            height: 30px;
            line-height: 30px;
            border-radius: 10px;
            cursor: pointer;
            margin-right: 5px;
            flex-shrink: 0;

            .el-icon-close {
                color: #1890FF;
                margin-left: 5px;
            }
        }

        .tagViewItem:hover {
            color: #1890FF;
        }
    }
}
</style>